<template>
  <el-dialog
    title="输入口令"
    :visible.sync="open"
    width="30%"
    :show-close="false"
    append-to-body
    class="dia-style"
    destroy-on-close
    :close-on-click-modal="false">
    <el-form ref="lockForm" :model="lockForm" :rules="rules" @submit.native.prevent>
      <div class="tip">请输入口令，解除系统锁定</div>
      <el-form-item prop="password">
        <el-input type="password" v-model="lockForm.password" placeholder="请输入密码解锁屏幕"  @keyup.enter.native="handleSubmit"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import * as lock from '@/utils/lock'
import { encrypt } from '@/utils/jsencrypt'
export default {
  name: 'LockScreen',
  data() {
    return {
      open: false,
      password: '',
      lockForm: {},
      rules: {
        password: [{ required: true, message: '请输入密码解锁', trigger: 'blur' }],
      },
    }
  },
  mounted() {
    this.open = lock.status()
  },
  methods: {
    show() {
      this.$confirm('您确定要锁定屏幕吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.handleLock()
          // 添加锁屏事件
          document.addEventListener('keydown', this.forbidF12)
          document.addEventListener('mousedown', this.forbidRight)
          //防止页面后退
          window.addEventListener('popstate', this.backCommon)
          window.addEventListener('beforeunload', this.refresfPage)
      
        })
        .catch(() => {})
    },
    // 点击禁用事件
    forbidF12(event) {
      //禁用F12
      if (event && event.keyCode == 123) {
        event.preventDefault() // 阻止默认事件行为
        window.event.returnValue = false
      }
      //屏蔽F5
      else if (event && event.keyCode == 116) {
        event.preventDefault() // 阻止默认事件行为
        window.event.returnValue = false
      } //禁用ctrl+shift+i,
      else if (event.ctrlKey && event.shiftKey && event.keyCode == 73) {
        event.preventDefault() // 阻止默认事件行为
        window.event.returnValue = false

        //屏蔽Shift+F10
      } else if (event.shiftKey && event.keyCode == 121) {
        event.preventDefault() // 阻止默认事件行为
        window.event.returnValue = false
      }
    },
    // 禁用右键
    forbidRight(event) {
      if (event.button == 2) {
        alert('右键已经被禁用了！')
      }
    },
    // 禁止回退
    backCommon() {
      history.pushState(null, null, document.URL)
    },
    // 禁止刷新
    refresfPage(e) {
      e.preventDefault()
      window.event.returnValue = false
   
    },
    handleLock() {
      this.open = true
        lock.lock()
    /*   this.$store.dispatch('LogOut').then(() => {
        this.open = true
        lock.lock()
      }) */
    },

    handleSubmit() {
      this.$refs.lockForm.validate((valid) => {
        if (valid) {
          const username = this.$store.state.user.name
          this.$store
            .dispatch('Login', {
              username: username,
              password: encrypt(this.lockForm.password),
            })
            .then(() => {
              this.open = false
              this.$refs.lockForm.resetFields()
              // 移除监控事件
              document.removeEventListener('keydown', this.forbidF12)
              document.removeEventListener('mousedown', this.forbidRight)
              window.removeEventListener('popstate', this.backCommon)
              window.removeEventListener('beforeunload', this.refresfPage)
              lock.unlock()
              setTimeout('window.location.reload()', 100)
            })
            .catch((e) => {
              this.$modal.msgError(e)
            })
        }
      })
    },
  },
  destroyed() {},
}
</script>
<style lang="scss" scoped>
.el-form{
  padding: 20px;
.tip{
  margin-bottom: 20px;
}
}
</style>
